<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: HeAo
 * @LastEditTime: 2021-12-19 17:13:38
-->
<template>
  <div class="home">
    <!-- 首页导航 -->
    <van-nav-bar title="首页" />
    <!-- 工单类型栏目 -->
    <van-tabs v-model="active" @click="tabClickHandler">
      <van-tab :title="item" v-for="(item, index) in orderType" :key="index">
        <!-- 工单列表 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            class="orderBox"
            v-for="(item, index) in orderList"
            :key="index"
            @click="toWorkeOrderDetails(item)"
          >
            <div class="left">
              <img
                src="@/assets/order.png"
                alt="图片丢失"
                width="50px"
                height="50px"
              />
            </div>
            <div class="right">
              <div>工单状态：{{ item.status }}</div>
              <div>工单类型：{{ item.type }}</div>
              <div>创建时间：{{ item.create_time | datefmt }}</div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { get } from "@/http/axios";
export default {
  data() {
    return {
      loading: false,
      finished: true,
      active: "",
      orderType: ["全部", "安装", "维修", "拆机"],
      params: {
        page: 1,
        pageSize: 100,
        type: null,
      },
      orderList: [],
    };
  },
  methods: {
    // 列表下滑加载方法
    onLoad() {},
    // tab点击方法
    tabClickHandler(name, title) {
      if (title != "全部") {
        this.params.type = title;
      }
      // 重载数据
      this.pageQueryWorkerOrders();
    },
    // 分页查询工单信息
    pageQueryWorkerOrders() {
      this.loading = true;
      get("/workorder/pageQuery", this.params).then((res) => {
        this.orderList = res.data.list;
      });
    },
    // 跳转至工单详情页
    toWorkeOrderDetails(workOrder) {
      this.$router.push({
        path: "/orderDetail",
        query: workOrder,
      });
    },
  },
  created() {
    // 调用分页查询工单的方法
    this.pageQueryWorkerOrders();
  },
};
</script>
<style scoped>
.home {
  padding-bottom: 50px;
}
.orderBox {
  border: 1px solid #999;
  margin: 10px;
  padding: 10px;
  height: 80px;
  display: flex;
  cursor: pointer;
}
</style>